<!--
***空页面的集合***
-->
<template>
  <div class="emptybox">
    <template v-for="(item, index) in showData" v-if="item.type===showType">
      <img :src="item.icon" alt="">
      <div class="text" v-html="item.text1" style="text-align: center;"></div>
      <div class="text" style="margin-top:24.8vw;" v-if='item.text2'>{{item.text2}}</div>
      <a href="javascript:;" v-if="item.app.urlExist" v-web-app="item.app">{{item.btn}}</a>
    </template>
  </div>
</template>
<script>
export default {
  props: {
    showType: { type: Number, default: 0 },
    distributionId: { type: String, default: '' }
  },
  data() {
    return {
      showData: [
        {
          type: 0,
          text1: '哎呀，空荡荡的呢~<br/>赶紧去挑选商品分享给好友吧！',
          text2: '',
          btn: '去挑选商品分享给好友',
          icon: '/static/img/d_commodity.png',
          link: '/distribution/',
          app: {
            urlExist: true,
            urltype: {
              appUrl: {
                name: 'gotoAppFashionCenter',
                params: {
                  url: `${window.document.location.protocol}//${window.document.location.host}/distribution/`,
                  distributionId: this.distributionId
                }
              },
              webUrl: {
                name: '/distribution/',
                params: {}
              }
            }
          }
        },
        {
          type: 1,
          text1: '该月份暂无收益哦~',
          text2: '挑选商品分享给好友就能获得相应佣金哦',
          btn: '去挑选商品分享给好友',
          icon: '/static/img/d_income_empty.png',
          link: '/distribution/',
          app: {
            urlExist: true,
            urltype: {
              appUrl: {
                name: 'gotoAppFashionCenter',
                params: {
                  url: `${window.document.location.protocol}//${window.document.location.host}/distribution/`,
                  distributionId: this.distributionId
                }
              },
              webUrl: {
                name: '/distribution/',
                params: {}
              }
            }
          }
        },
        {
          type: 2,
          text1: '喜欢分享的人会收获更多朋友哦~<br/>快去分享吧！~',
          text2: '挑选商品分享给好友就能获得相应佣金哦',
          btn: '去挑选商品分享给好友',
          icon: '/static/img/d_commodity.png',
          link: '/distribution/',
          app: {
            urlExist: true,
            urltype: {
              appUrl: {
                name: 'gotoAppFashionCenter',
                params: {
                  url: `${window.document.location.protocol}//${window.document.location.host}/distribution/`,
                  distributionId: this.distributionId
                }
              },
              webUrl: {
                name: '/distribution/',
                params: {}
              }
            }
          }
        },
        {
          type: 3,
          text1: '哎呀，空荡荡的呢~<br/>不如去挑选商品分享给好友吧！~',
          text2: '挑选商品分享给好友就能获得相应佣金哦',
          btn: '去挑选商品分享给好友',
          icon: '/static/img/d_collection_empty.png',
          link: '/distribution/',
          app: {
            urlExist: true,
            urltype: {
              appUrl: {
                name: 'gotoAppFashionCenter',
                params: {
                  url: `${window.document.location.protocol}//${window.document.location.host}/distribution/`,
                  distributionId: this.distributionId
                }
              },
              webUrl: {
                name: '/distribution/',
                params: {}
              }
            }
          }
        },
        {
          type: 4,
          text1: '点击上方邀请好友一起来赚钱吧~',
          text2: '',
          btn: '',
          icon: '/static/img/d_empty1.png',
          link: '/distribution/',
          app: {
            urlExist: false,
            urltype: {
              appUrl: {
                name: 'gotoAppFashionCenter',
                params: {
                  url: `${window.document.location.protocol}//${window.document.location.host}/distribution/`,
                  distributionId: this.distributionId
                }
              },
              webUrl: {
                name: '/distribution/',
                params: {}
              }
            }
          }
        },
        {
          type: 5,
          text1: '抱歉，该类目暂无数据哦~',
          text2: '挑选商品分享给好友就能获得相应佣金哦',
          btn: '去挑选商品分享给好友',
          icon: '/static/img/d_income_empty.png',
          link: '/distribution/',
          app: {
            urlExist: true,
            urltype: {
              appUrl: {
                name: 'gotoAppFashionCenter',
                params: {
                  url: `${window.document.location.protocol}//${window.document.location.host}/distribution/`,
                  distributionId: this.distributionId
                }
              },
              webUrl: {
                name: '/distribution/',
                params: {}
              }
            }
          }
        }
      ]
    }
  }
}
</script>
<style lang='scss' scoped>
.emptybox{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10vw 0 10vw;
  img{
    width: 48vw;
    margin-bottom: 5vw;
  }
  .text{
    font-size: 14px;
    color: #666;
    margin-bottom: 1vw;
    &:last-of-type{
      margin-bottom: 5vw;
    }
  }
  a{
    background: #333;
    color: #fff;
    width: 80vw;
    height: 11.73vw;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>


